<template>
  <div>
   <span>选择需要加上的步长：</span> 
    <select v-model="step">
      <option :value="1">1</option>  
      <option :value="2">2</option>  
      <option :value="3">3</option>  
    </select>
    <!-- 使用mapActions的话要带一个value参数 -->
    <button @click="incr(step)">加</button>
    <button @click="decr(step)">减</button>
    <button @click="incrWhenOdd(step)">奇数加</button>
    <button @click="incrDelay(step)">延时加</button>
  </div>
</template>

<script>
import {mapActions,mapMutations} from 'vuex'

export default {
    data() {
        return {
            step:1 
        }
    },
    methods:{
      
      // incr(){
      //   //  this.$store.dispatch('jia',this.step)
      //   //也可以直接跳过action，和 mutations打交道
      //   this.$store.commit('JIA',this.step)
      // },
      // decr(){
      //    this.$store.dispatch('jian',this.step)
      // },
      // incrWhenOdd(){
      //    this.$store.dispatch('jiaWhenOdd',this.step)
      // },
      // incrDelay(){
      //       this.$store.dispatch('jiaDelay',this.step)
      // },
      
      //使用 mapMutations 和 mapActions
      ...mapMutations({incr:'JIA'}),
      ...mapActions({decr:'jian',incrWhenOdd:'jiaWhenOdd',incrDelay:'incrDelay'})
      
    }
}
</script>

<style>
  div *{
    margin-right: 20px;
  }
</style>